<nz-layout style="width: 100vw;height: 100vh;">
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="triggerTemplate">
    <div class="logo">
      <img src="../../../../../assets/icon/image/wistron-logo.png" alt="">
    </div>
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed">
      <li nz-menu-item>
        <span title><i nz-icon type="user"></i><span class="nav-text" (click)="stepNav(1)">第一阶段</span></span>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="user"></i><span class="nav-text">第二阶段</span></span>
        <ul>
          <li nz-menu-item (click)="stepNav(21)">表格</li>
          <li nz-menu-item (click)="stepNav(22)">更改表格颜色</li>
          <li nz-menu-item (click)="stepNav(23)">表格Excel内容下载</li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="user"></i><span class="nav-text">第三阶段</span></span>
        <ul>
          <li nz-menu-item (click)="stepNav(31)">echart基本使用</li>
          <li nz-menu-item (click)="stepNav(32)">柱图+折线图</li>
          <li nz-menu-item (click)="stepNav(33)">环形图+图例</li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="user"></i><span class="nav-text">第四阶段</span></span>
        <ul>
          <li nz-menu-item (click)="stepNav(41)">基础路由</li>
          <li nz-menu-item (click)="stepNav(42)">路由传值</li>
          <li nz-menu-item (click)="stepNav(43)">发布订阅使用</li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header style="background: #fff; padding:0;">
      <i class="trigger" nz-icon [type]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
        (click)="isCollapsed = !isCollapsed"></i>
    </nz-header>
    <nz-content style="margin:0 16px;    overflow: hidden;">
      <nz-breadcrumb style="margin:16px 0;">
        <nz-breadcrumb-item>内容区域</nz-breadcrumb-item>
      </nz-breadcrumb>
      <div style="background: #fff; height: 800px;">
        <div *ngIf="curShowContent==1" style="height: 100%;">
          <app-layout-step1></app-layout-step1>
        </div>
        <div *ngIf="curShowContent==21" style="height: 100%;">
          <app-table-step21></app-table-step21>
        </div>
        <div *ngIf="curShowContent==22" style="height: 100%;">
          <app-table-step22></app-table-step22>
        </div>
        <div *ngIf="curShowContent==23" style="height: 100%;">
          <app-table-step23></app-table-step23>
        </div>
        <div *ngIf="curShowContent==31" style="height: 100%;">
          <app-echart-step31></app-echart-step31>
        </div>
      </div>
    </nz-content>
    <nz-footer style="text-align: center;">Tranning By SAM</nz-footer>
  </nz-layout>
</nz-layout>
<ng-template #trigger>
  <i nz-icon type="up"></i>
</ng-template>
